<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id="app" class="text-center">
    <h1>hello</h1>
    <h1>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </h1>
    <div>
        <router-view></router-view>
    </div>
</div>

<script src="../frm/vue.js"></script>
<script src="../frm/vue-router.js"></script>

<script>

    const Foo = {template:"<h1>Foo</h1>"}
    const Bar = {template:"<h1>Bar</h1>"}

    const routes = [
        {
            path:"/foo",
            component:Foo
        },
        {
            path:"/bar",
            component:Bar
        }
    ];
    const router = new VueRouter({
        routes
    });
    let app = new Vue({
        el: "#app",
        router
    });



</script>

</body>
</html>
